<template>
  <div class='container'>
    <el-card>
      <template #header>
        <span>{{$route.query.id?'试题编辑':'试题录入'}}</span>
      </template>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">

        <el-form-item  label="学科" prop="subjectID">

          <el-select  style="width: 400px" v-model="form.subjectID"   @focus="getSubjectList" >
            <el-option  ref="option" v-for="subject in subjects" :key="subject.id" :label="subject.subjectName"
                       :value="subject.id" >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select style="width: 400px" v-model="form.catalogID" placeholder="请选择目录" @focus="getDirectoryList">
            <el-option
              v-for="directory in directories"
              :key="directory.id"
              :label="directory.directoryName"
              :value="directory.id"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select style="width: 400px" v-model="form.enterpriseID" placeholder="请选择企业" @focus="getCompanyList">
            <el-option v-for="company in companies" :key="company.id" :label="company.company"
                       :value="company.id"></el-option>
          </el-select>
        </el-form-item>
        <div style="display: flex;justify-content: start">

          <el-form-item label="城市" prop="province">
            <el-select style="width: 200px" v-model="form.province" placeholder="请选择市" @focus="getProvinceList">
              <el-option
                v-for="(province,index) in provinces" :key="index" :label="province" :value="province"
              ></el-option>
            </el-select>

          </el-form-item>
          <el-form-item prop="city" label-width="0">
            <el-select style="width: 200px" v-model="form.city" placeholder="请选择区" @focus="getCityList">
              <el-option
                v-for="(city,index) in cities" :key="index" :label="city" :value="city"
              ></el-option>

            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="方向" prop="direction">
          <el-select style="width: 400px" v-model="form.direction" placeholder="请选择方向">

            <el-option v-for="(direction,index) in directions" :key="index" :label="direction"
                       :value="direction"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="form.questionType">
            <el-radio v-for="type in questionType" :key="type.value" :label="type.value.toString()">{{type.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio v-for="type in difficulty" :key="type.value" :label="type.value.toString()">{{type.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="area" label="题干" prop="question">
          <quillEditor style="height: 140px" v-model="form.question" :options="editorOption"></quillEditor>
        </el-form-item>
        <el-form-item label="选项" v-if="form.questionType!=='3'">

          <el-radio-group v-model="selected" style="display: flex;flex-direction: column" v-if="form.questionType==='1'">

            <el-radio style="padding: 20px 0;width: 400px"
                      v-for="(option,index) in form.options" :key="index" :label="index">{{ option.code }}:
              <el-input v-model="option.title"></el-input>
            </el-radio>
          </el-radio-group>
          <template v-if="form.questionType==='2'">

            <el-checkbox v-model="option.isRight" :true-label='1' :false-label='0' style="padding: 20px 0;width: 400px"
                         v-for="(option,index) in form.options" :key="index+'s'">{{ option.code }}:
              <el-input v-model="option.title"></el-input>
            </el-checkbox>
          </template>
          <div>

            <el-button :disabled="form.questionType!=='2'" @click="addOption" type="danger">添加选项与答案</el-button>
          </div>
        </el-form-item>
        <el-form-item label="解析视频">
          <el-input style="width: 400px;" v-model="form.videoURL"></el-input>
        </el-form-item>
        <el-form-item label="答案解析" class="area" prop="answer">
          <quillEditor style="height: 140px" v-model="form.answer" :options="editorOption"></quillEditor>

        </el-form-item>
        <el-form-item label="题目备注">

          <el-input type="textarea" :rows="5" v-model="form.remarks"></el-input>
        </el-form-item>
        <el-form-item label="题目标签" prop="tags">
          <el-select style="width: 400px;" v-model="form.tags" placeholder="请选择标签">
            <el-option v-for="tag in tags" :key="tag.id" :label="tag.tagName" :value="tag.tagName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{$route.query.id?'确认修改':'确认提交'}}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { list as subjectList } from '@/api/hmmm/subjects'
import { list as companyList } from '@/api/hmmm/companys'
import { list as directoryList } from '@/api/hmmm/directorys'
import { add as addQuestion, detail, update as updateQuestion } from '@/api/hmmm/questions'
import { list as tagList } from '@/api/hmmm/tags'
import { citys, provinces } from '@/api/hmmm/citys'
import { difficulty, direction, questionType } from '@/api/hmmm/constants'

export default {
  name: 'QuestionNew',
  components: {
    quillEditor
  },
  data () {
    return {
      selected: '',
      subjects: [],
      companies: [],
      tags: [],
      directions: direction,
      questionType,
      difficulty,
      directories: [],
      provinces: [],
      cities: [],
      form: {
        directoryName: '',
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '',
        difficulty: '',
        question: '',
        videoURL: '',
        answer: '',
        remarks: '',
        tags: '',

        options: [{ isRight: 0, code: 'A', title: '' },
          { isRight: 0, code: 'B', title: '' },
          { isRight: 0, code: 'C', title: '' },
          { isRight: 0, code: 'D', title: '' }]

      },
      editorOption: {
        // 占位配置
        placeholder: '',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }]
          ]
        }

      },
      rules: {
        subjectID: [{ required: true, message: '学科不能为空', trigger: 'change' }],
        catalogID: [{ required: true, message: '目录不能为空', trigger: 'change' }],
        // tags: [{ required: true, message: '标签不能为空', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '公司不能为空', trigger: 'change' }],
        province: [{ required: true, message: '城市不能为空', trigger: 'change' }],
        city: [{ required: true, message: '地区不能为空', trigger: 'change' }],
        direction: [{ required: true, message: '方向不能为空', trigger: 'change' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入解析', trigger: 'blur' }]
      }

    }
  },

  watch: {
    selected (newVal) {
      // eslint-disable-next-line no-return-assign
      this.form.options.forEach(item => item.isRight = 0)
      if (this.form.options[newVal]) {
        this.form.options[newVal].isRight = 1
      }
    }
  },

  methods: {
    addOption () {
      this.form.options.push({ isRight: 0, code: String.fromCharCode(this.form.options.length + 65), title: '' })
    },
    async onSubmit () {
      try {
        await this.$refs.form.validate()

        if (this.$route.query.id) {
          await updateQuestion({ ...this.form })
          this.$message.success('修改成功~')
        } else {
          await addQuestion({ ...this.form })
          this.$message.success('添加成功~')
        }

        this.$refs.form.resetFields()

        this.form.options = [
          { isRight: 0, code: 'A', title: '' },
          { isRight: 0, code: 'B', title: '' },
          { isRight: 0, code: 'C', title: '' },
          { isRight: 0, code: 'D', title: '' }
        ]
      } catch (e) {
        console.log(e)
      }
    },
    async getSubjectList () {
      const res = await subjectList()
      this.subjects = res.data.items
      this.directories = []
      this.form.directoryName = ''
    },
    async getCompanyList () {
      const res = await companyList()

      this.companies = res.data.items
    },
    async getDirectoryList () {
      const { data: { items } } = await directoryList({ pagesize: 20 })

      console.log(items)

      this.directories = items.filter(item => item.subjectID === this.form.subjectID)
      console.log(this.directories)
    },
    async getTagList () {
      const { data: { items } } = await tagList()

      this.tags = items.filter(item => item.subjectID === this.form.subjectID)
      console.log(this.tags)
    },
    getProvinceList () {
      this.provinces = provinces()
    },
    getCityList () {
      this.cities = citys(this.form.province)
    }
  },
  mounted () {
    if (this.$route.query.id) {
      const id = this.$route.query.id
      detail({ id }).then(async res => {
        this.form = res.data
        if (this.form.questionType === '1') {
          this.selected = this.form.options.findIndex(option => option.isRight === 1)
        }
        await this.getCompanyList()
        await this.getSubjectList()
        await this.getDirectoryList()
      })
    } else {

    }
  }
}
</script>

<style lang="scss">
.area .el-form-item__content {
  height: 200px;
}
</style>
